<template>
  <div class="category">
    <div class="search">
      <el-form
        ref="searchForm"
        v-loading="listLoading"
        :model="searchForm"
        inline
        class="search-form"
      >
        <div class="search-row-left">
          <el-form-item prop="status">
            <div slot="label" class="search-label">分类状态：</div>
            <el-select
              v-model="searchForm.status"
              placeholder="请选择状态"
              clearable
              style="width: 120px"
              @change="getCategoryList"
            >
              <el-option label="禁用" :value="0" />
              <el-option label="启用" :value="1" />
            </el-select>
          </el-form-item>
          <el-form-item prop="deleted">
            <div slot="label" class="search-label">是否展示软删除：</div>
            <el-select
              v-model="searchForm.deleted"
              placeholder="请选择"
              clearable
              style="width: 120px"
              @change="getCategoryList"
            >
              <el-option label="隐藏" :value="0" />
              <el-option label="展示" :value="1" />
            </el-select>
          </el-form-item>
        </div>
        <div class="search-row-right">
          <el-form-item>
            <el-button type="default" size="medium" @click="resetSearchData">
              重置
            </el-button>
            <el-button type="primary" size="medium" @click="create">
              新增分类
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-input
              placeholder="请输入内容"
              v-model="searchForm.keyword"
              class="input-with-select"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="searchData"
              ></el-button>
            </el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="app-container">
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        fit
        highlight-current-row
        class="table-wrap"
      >
        <el-table-column
          v-for="item in tableColumns"
          :key="item.key"
          :label="item.label"
          :align="item.align"
          :width="item.width"
        >
          <template slot-scope="scope">
            <div>{{ scope.row[item.key] }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180px">
          <template slot-scope="scope">
            <el-dropdown>
              <span class="el-dropdown-link">
                <i class="el-icon-arrow-right el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  icon="el-icon-edit"
                  @click.native="handleEdit(scope.row.id)"
                  >编辑</el-dropdown-item
                >
                <el-dropdown-item
                  icon="el-icon-delete"
                  @click.native="handleDelete(scope.row.id)"
                  >删除</el-dropdown-item
                >
                <el-dropdown-item
                  icon="el-icon-delete-solid"
                  @click.native="handleRealDelete(scope.row.id)"
                  >彻底删除</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <el-card>
        <div class="pagination-wrap">
          <el-pagination
            background
            :current-page.sync="searchForm.pageNo"
            layout="total, sizes"
            :total="count"
            :page-sizes="[10, 15, 20]"
            :page-size="10"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
          <el-pagination
            background
            :current-page.sync="searchForm.pageNo"
            layout="prev, pager, next"
            :total="count"
            :page-sizes="[10, 15, 20]"
            :page-size="10"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
          <el-pagination
            background
            :current-page.sync="searchForm.pageNo"
            layout="jumper"
            :total="count"
            :page-sizes="[10, 15, 20]"
            :page-size="10"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, detele, update } from "@/api/category";
export default {
  name: "CategoryList",
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: "danger",
        1: "success",
      };
      return statusMap[status];
    },
    statusFilterText(status) {
      const statusMap = {
        0: "隐藏",
        1: "正常",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      list: null,
      listLoading: true,
      count: 0,
      searchForm: {
        keyword: "",
        status: "",
        deleted: "",
        pageNo: 1,
        pageSize: 10,
      },
      tableColumns: [
        {
          key: "id",
          label: "ID",
          align: "center",
          // width: '8%',
        },
        {
          key: "name",
          label: "分类名称",
          align: "center",
          // width: '8%',
        },
        {
          key: "description",
          label: "分类描述",
          align: "center",
          // width: '8%',
        },
        {
          key: "article_amount",
          label: "包含文章数",
          align: "center",
          // width: '8%',
        },
        {
          key: "article_child_num",
          label: "包含子分类数",
          align: "center",
          // width: '8%',
        },
        {
          key: "create_time",
          label: "创建时间",
          align: "center",
          // width: '8%',
        },
        {
          key: "modified_time",
          label: "修改时间",
          align: "center",
          // width: '8%',
        },
        {
          key: "delete_time",
          label: "删除时间",
          align: "center",
        },
      ],
    };
  },
  mounted() {
    this.getCategoryList();
  },
  methods: {
    // 跳转创建分类
    create() {
      this.$router.push("/category/edit");
    },
    // 获取分类列表
    async getCategoryList() {
      try {
        console.log("searchForm", this.searchForm);
        this.listLoading = true;
        const res = await list(this.searchForm);
        if (res.code == 200) {
          this.list = res.data;
          this.count = res.total;
        }
      } catch (err) {
        console.log(err);
      } finally {
        this.listLoading = false;
      }
    },
    // 跳转分类编辑
    handleEdit(id) {
      console.log("id", id);
      this.$router.push("/category/edit?id=" + id);
    },
    handleDelete(id) {
      try {
        this.$msgbox
          .confirm("确定需要删除这个分类吗", "提示", {
            confirmButtonText: "删除",
            cancelButtonText: "取消",
            type: "error",
          })
          .then(async () => {
            const r = await update({ id: id, deleted: id });
            console.log("r", r);
            if (r.code == 200) {
              this.$message.success(r.message);
              await this.getCategoryList();
            }
          });
      } catch (err) {
        this.$message.error(err);
      }
    },
    // 删除分类
    handleRealDelete(id) {
      try {
        this.$msgbox
          .confirm("确定需要彻底删除这个分类吗", "提示", {
            confirmButtonText: "删除",
            cancelButtonText: "取消",
            type: "error",
          })
          .then(async () => {
            const r = await detele({ id });
            if (r.code == 200) {
              this.$message.success(r.message);
              await this.getCategoryList();
            }
          });
      } catch (err) {
        this.$message.error(err);
      }
    },
    // 搜索
    searchData() {
      console.log("???");
      this.searchForm.pageNo = 1;
      this.getCategoryList();
    },
    // 点击页码
    handleCurrentChange(pageNo) {
      this.searchForm.pageNo = pageNo;
      this.getCategoryList();
    },
    // 点击页码大小
    handleSizeChange(val) {
      console.log("val", val);
    },
    // 重置表单
    resetSearchData() {
      this.$refs["searchForm"].resetFields();
      this.getCategoryList();
    },
  },
};
</script>

<style scoped lang="scss">
.category {
  // padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里
  box-sizing: border-box;
  padding: 25px;
  // background: linear-gradient(#e6f3af 50%, #f8f8f8 0);
  // min-height: 650px;
}
.search {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .search-form {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
  }
  .search-row-right {
    display: flex;
    flex-wrap: wrap;
  }
}
.table-wrap {
  min-height: 500px;
}
.pagination-wrap {
  display: flex;
  justify-content: space-between;
}
</style>
